<html>
	<head>
   		<title>TimeLine</title>
   		<link rel="stylesheet" type="text/css" href="style.css"/>
   		<style type="text/css">
     		@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";
   		</style>   
 	</head>
 	<body class = "claro">
 	
 	 	<span id="toolbar"></span>
 		
 		<div id="wrap">
 			<div id="content">
 				<div id="content-inner">
 					<!-- div id="branding">TimeLine</div -->
 				</div>
   				<canvas id="timeline" class="canvasbox" width="800";height="900";></canvas>
   			</div>
   		</div>
   		
   		<div dojoType="dijit.Dialog" id="formDialog" title="Add Event" execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
            <table>
            <tr><td><label for="name">Name:</label></td><td><input dojoType="dijit.form.TextBox" type="text" name="name" id="name"></td></tr>
            <tr><td><label for="date">Start date:</label></td><td><input dojoType="dijit.form.DateTextBox" type="text" name="sdate" id="sdate"></td></tr>
            <tr><td><label for="date">End date:</label></td><td><input dojoType="dijit.form.DateTextBox" type="text" name="edate" id="edate"></td></tr>
			<tr><td><label for="date">Time:</label></td><td><input dojoType="dijit.form.TimeTextBox" type="text" name="time" id="time"></td></tr>
			<tr><td><label for="desc">Description:</label></td><td><input dojoType="dijit.form.TextBox" type="text" name="desc" id="desc"></td></tr>
			<tr><td align="center" colspan="2">
				<button dojoType="dijit.form.Button" type="submit" onClick="return dijit.byId('formDialog').isValid();">OK</button>	
				<button dojoType="dijit.form.Button" type="button" onClick="dijit.byId('formDialog').hide();">Cancel</button>
            </td></tr>
            </table>
        </div>
   		
 	</body>
   	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad:true, isDebug: false"></script>  	
   	<script type="application/x-javascript">
   	
   		dojo.require("dijit.Toolbar");
    	dojo.require("dijit.form.Button");
    	dojo.require("dijit.Dialog");
    	
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit.form.DateTextBox");
            dojo.require("dijit.form.TimeTextBox");
 	
 		var events = [ { date: "December 15, 2010", title: "CHRISTMAS PARTY", description: "THIS IS THE FIRST EVENT" },
 					   { date: "December 20, 2010", title: "CHRISTMAS SHOPPING", description: "THIS IS THE SECOND EVENT" },
 					   { date: "December 25, 2010", title: "CHRISTMAS DAY", description: "CHRISTMAS DAY" },
 					   { date: "December 28, 2010", title: "POTATO LAND CONQUERED", description: "BY POTATO POTATO" },
 					   { date: "December 31, 2010", title: "NEW YEAR'S EVE", description: "NEW YEARS EVE" },
 					   { date: "January 3, 2011", title: "BACK TO WORK :(", description: "BACK TO WORK" } ]
 	
 		var canvas = document.getElementById("timeline");
 	
 		var zones = new Array();
 	
 		var ctx = canvas.getContext("2d");      
 	
 		var TIMELINE_HEIGHT = 20;  
 		var TIMELINE_WIDTH = 750;
 		var TIMELINE_BASE = 100;	
   		var TIMELINE_COLOR = 'rgba(0,153,255, 0.8)';
   	
   		function addLine( x, y, event ){
   		
   			ctx.beginPath();
    	
    		ctx.moveTo( x,TIMELINE_BASE + TIMELINE_HEIGHT );
			ctx.lineTo( x,TIMELINE_BASE);
			ctx.moveTo( x + 50, y );
			ctx.lineTo( x, TIMELINE_BASE );
			
			ctx.strokeStyle = 'rgba( 255,154,0, 1 )';
  			ctx.lineWidth = 2;
			
			ctx.stroke();
			
			ctx.fillStyle = 'rgba( 255,0,0, 1 )';
			
			ctx.beginPath();
			ctx.arc( x + 50, y, 5, 0, Math.PI*2, true); 
			ctx.closePath();
			ctx.fill();
			
			var e = { x: x + 45, y: y, description: event.description };
			
			zones.push( e );
			
			ctx.fillText( event.title, x + 58, y + 3 );
			
			var dte = new Date( event.date );
			
			var number = dte.getMonth() +1;
			
			ctx.fillText( dte.getDate() + "." + number + "." + dte.getFullYear(), x -20, TIMELINE_BASE + TIMELINE_HEIGHT +10 );
   		}
   	
   		
   		function drawBase( start, end ){
   		
   			ctx.fillStyle = TIMELINE_COLOR;		
  			ctx.fillRect( 0, TIMELINE_BASE, TIMELINE_WIDTH, TIMELINE_HEIGHT );
  			
  			ctx.strokeStyle = 'rgba( 41,12,161, .6 )';
  			ctx.lineWidth = 4;
  			ctx.lineCap = 'round';
  			
  			ctx.moveTo( 3, TIMELINE_BASE );
			ctx.lineTo( 3, TIMELINE_BASE + TIMELINE_HEIGHT + 10 );
  			ctx.stroke();
  			
  			ctx.moveTo( TIMELINE_WIDTH - 3, TIMELINE_BASE );
			ctx.lineTo( TIMELINE_WIDTH - 3, TIMELINE_BASE + TIMELINE_HEIGHT + 10 );
  			ctx.stroke();
  			
  			ctx.fillStyle = 
  			ctx.strokeStyle = 'rgba( 71,67,61, 1 )';
  			
  			var s = start.toUTCString();  			
  			ctx.fillText( 'START', 0, TIMELINE_BASE -10 );
  			
  			var e = end.toUTCString();
  			ctx.fillText( 'END', TIMELINE_WIDTH - 22, TIMELINE_BASE -10 );
  			
  			var s = start.toUTCString();  			
  			ctx.fillText( s, 0, TIMELINE_BASE + TIMELINE_HEIGHT + 30 );
  			
  			var e = end.toUTCString();
  			ctx.fillText( e, TIMELINE_WIDTH - 152, TIMELINE_BASE + TIMELINE_HEIGHT + 30 );
   		}
   		
   		function handleClick( e ){
   		
   			var x;
		    var y;
		
		    if( e.pageX != undefined && e.pageY != undefined ){
				x = e.pageX;
				y = e.pageY;
		    }
		    else {
				x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
				y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		    }
		    
		    x -= canvas.offsetLeft;
		    y -= canvas.offsetTop + 75;
		    
		    console.log( "X: " + x, "Y: " + y );
		 
		 	for( var z = 0; z < zones.length; z++ ){
		 	
		 		if( x > zones[z].x && x < zones[z].x + 10 ){
		 			
		 			console.log( "Y: " + zones[z].y );
		 			
		 			if( y > zones[z].y && y < zones[z].y + 10 ){
		 			
		 				var d = document.createElement('div');
		 			
		 				d.x = x;
		 				d.y = y;
		 				d.style.width = '50px';
		 				d.style.height = '50px';
		 				d.style.background = 'blue';
		 				
		 				document.body.appendChild(d);
		 			
		 			
		 				console.log( zones[z].description );
		 			}
		 		}
		 	}
   		}	
   		
   		function daysBetweenDates( first, second ){
   		
   			var oneDay=1000*60*60*24
			var days = Math.ceil( ( second.getTime() - first.getTime() ) / oneDay );
   			
   			return days;
   		}
   		
   		function addEvents( start, end ){
   		
   		 	var days = daysBetweenDates( start, end );
       			
       		var xscale = TIMELINE_WIDTH/days;
       			
       		console.log( "DAYS: " + days );
   		   			
  			for( var e = 0; e < events.length; e++ ){
  				
  				var span = daysBetweenDates( start, new Date( events[e].date ) );
  					
  				var x = span * xscale;
  				
  				var top = 10;
  				
  				if( zones.length %2 == 0 ){
   					top = 30;
   				}else top = 10;
  					
  				addLine( x, top, events[e] );
  			}
   		}
   		
   		function addItem(){
   			console.log( "ADD ITEM" );
   			
   			/* secondDlg = new dijit.Dialog({
            	title: "Add an event",
              	style: "width: 300px"
            });
            
            secondDlg.attr("content", "Hey, I wasn't there before, I was added at " + new Date() + "!");
            secondDlg.show(); */
            
            dijit.byId( 'formDialog' ).show();
   		}
   		
   		function setupTools(){
   		
   			toolbar = new dijit.Toolbar( {}, "toolbar" );
    	
    		var button = new dijit.form.Button({
                label: "Add Event",
                showLabel: false,
                iconClass: "addIcon",
                onClick: addItem
            });
    	
          	toolbar.addChild(button);
   		}
   	
    	function draw() {	
    	
    		setupTools();
      		
      		if (canvas.getContext) {    		
        		
       			var start = new Date( "December 11, 2010" );     			
       			var end = new Date( "Jan 10, 2011" );	
       
  				drawBase( start, end );			
  				addEvents( start, end );		
  				
  				canvas.addEventListener( "click", handleClick, false );				       
      		}
   		}
    
    	dojo.addOnLoad( draw );
  </script>
</html>